<template>
  <p>App</p>
  <el-button type="primary" @click="dialogVisible = true">按钮</el-button>
  <el-button type="danger">按钮</el-button>
  <el-button type="warning">按钮</el-button>

  <el-dialog v-model="dialogVisible" title="这是一个标题">
    <div>这是内容区</div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>

  <el-tree :data="treeData" default-expand-all />

  <!-- 
    label-width label的宽度
    model 参与表单校验的数据（整个表单的数据）
    rules 表单校验的规则
   -->
  <el-form label-width="80px" :model="user" :rules="rules">
    <!-- 
      prop="username" 指定当前表单项的校验规则
     -->
    <el-form-item label="用户名" prop="username">
      <el-input
        placeholder="请输入用户名"
        class="input"
        v-model="user.username"
      ></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input
        placeholder="请输入密码"
        type="password"
        class="input"
        v-model="user.password"
      ></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
export default {
  name: "App",
  data() {
    return {
      dialogVisible: false,
      treeData: [
        {
          label: "节点1",
          children: [
            {
              label: "节点1.1",
            },
            {
              label: "节点1.2",
            },
          ],
        },
        {
          label: "节点2",
          children: [],
        },
      ],
      // 表单数据
      user: {
        username: "",
        password: "",
      },
      // 表单校验规则：校验规则的名称必须和数据名称一致
      rules: {
        username: [
          {
            required: true, // 必填项
            message: "请输入用户名", // 校验失败提示信息
            trigger: "blur", // 触发校验的时机：失去焦点触发
          },
        ],
        password: [
          {
            required: true, // 必填项
            message: "请输入密码", // 校验失败提示信息
            trigger: "blur", // 触发校验的时机：失去焦点触发
          },
          {
            message: "输入密码长度必须为6-18位", // 校验失败提示信息
            trigger: "blur", // 触发校验的时机：失去焦点触发
            min: 6,
            max: 18,
          },
        ],
      },
    };
  },
};
</script>

<style scoped>
.input {
  width: 200px;
}
</style>
